<template>


  <div class="news">
   {{msg}}
    <br>
    <button @click="emitHome()">给Home组件广播数据</button>
    <br>
    <div class="left">
      <ul>
        <li>
          <router-link to="/news/homeNews">国内新闻</router-link>
        </li>
        <li>
          <router-link to="/news/foreignNews"> 国外新闻</router-link>
        </li>
      </ul>
    </div>
    <br>
    Vuex中数据：{{this.$store.state.count}}
    <button @click="incCount()">增加数量+</button>
    <!--路由嵌套-->
    <div class="right">
      <router-view></router-view>
    </div>


  </div>

</template>

<script>
    import VueEvent from "../model/VueEvent";
    import store from "../vuex/store";
    export default {
        name: "NewsPage",
        data(){
            return{
                "msg":"我是新闻组建"
            }
        },
        store,
        methods:{
            emitHome(){
                //广播
                VueEvent.$emit('to-home',this.msg)
            },
            incCount(){
                //改变vuex store里面的数据
                  this.$store.commit('incCount');   /*触发 mutations 改变 state里面的数据*/
                this.$store.dispatch('incMutationsCount');   /*触发 actions里面的方法   */
            }
        },
        mounted(){

            VueEvent.$on('to-news',function(data){
                console.log(" in news ",data);
            })
        }
    }
</script>

<style lang="scss" scoped>
  .news{
    display:flex;
    .left{
      width:200px;
      min-height:400px;
      border-right:1px solid #eee;
      li{
        line-height:2;
      }
    }
    .right{
      flex:1;
    }
  }
</style>
